<template>
    <div class="list" ref="wrapper">
      <div>   
        <div class="area border-topbottom">
           <div class="title">当前城市</div>
           <div class="button-list">
             <div class="list-wrapper">
                 <div class="button">北京</div> 
             </div> 
             <div class="list-wrapper">
                 <div class="button">北京</div> 
             </div> 
             <div class="list-wrapper">
                 <div class="button">北京</div> 
             </div> 
             <div class="list-wrapper">
                 <div class="button">北京</div> 
             </div> 
             <div class="list-wrapper">
                 <div class="button">北京</div> 
             </div>  
              
           </div> 
        </div>
        <div class="area border-topbottom">
           <div class="title">热门城市</div>
           <div class="button-list">
             <div class="list-wrapper">
                 <div class="button">北京</div> 
             </div> 
             <div class="list-wrapper">
                 <div class="button">北京</div> 
             </div> 
             <div class="list-wrapper">
                 <div class="button">北京</div> 
             </div> 
             <div class="list-wrapper">
                 <div class="button">北京</div> 
             </div> 
             <div class="list-wrapper">
                 <div class="button">北京</div> 
             </div>
           </div>  
        </div>
        <div class="area border-topbottom">
           <div class="title">A</div>
           <ul class="item-list border-bottom">
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
           </ul>
        </div>
        <div class="area border-topbottom">
           <div class="title">A</div>
           <ul class="item-list border-bottom">
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
               <li class="item">阿拉尔</li>
           </ul>
           
        </div>
      </div>  
    </div>
</template>

<script>
    import betterscroll from 'better-scroll'
    export default {
        name: 'CityList',
        mounted() {
          this.scroll = new betterscroll(this.$refs.wrapper)
        }
    }
</script>

<style lang="stylus" scoped>
   @import '~styles/varibles.styl'
   .border-topbottom
      &:before
        border-color:#ccc;
      &:after
        border-color:#ccc; 
   .border-bottom
      &:before 
        border-color:#ccc;     
   .list
      position:absolute;
      top:1.58rem;
      left:0;right:0;
      bottom:0;
      overflow:hidden;
      .title 
        line-height:.54rem;
        background:#eee;
        padding-left:.2rem;
        color:#666;
        font-size:.28rem;
        text-align:left;
      .button-list
        overflow:hidden;
        padding:.1rem .6rem .1rem .1rem; 
        text-align:left;  
        .list-wrapper
          float:left;
          width:33%;
        .button
          margin:.1rem;
          text-align:center;
          padding:.1rem .2rem;
          border:.02rem solid #ccc;
          border-radius:.06rem;
      .item-list
        .item
          line-height:.64rem;
          color:#666 
          text-align:left;
          padding-left:.2rem;     

</style>